<template>
  <div class="exchangeadd">
    <div class="outmain ba_f heighthv pad_20 bor_rad5">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>创建兑换码活动</span>
        </div>
      </div>
      <div class="mar_t20 flex-bet flex-y-top">
        <div class="flex-g-1">
          <el-form ref="form" :model="form" label-width="180px">
            <el-form-item label="兑换码名称" :required="true" prop="name">
              <el-input v-model="form.name" placeholder="请输入兑换码名称"></el-input>
            </el-form-item>
            <el-form-item label="活动时间" :required="true">
              <el-date-picker v-model="timeData" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['08:00:00', '23:59:59']"></el-date-picker>
            </el-form-item>
            <el-form-item label="库存" :required="true" prop="stock">
              <el-input v-model="form.stock" placeholder="请输入发放总量" :disabled="id>0"></el-input>
              <span class="mar_lr10">个</span>
            </el-form-item>
            <el-form-item label="每人可用" :required="true">
              <div class="time_item">
                <el-radio v-model="form.limitType" label="1">不限制</el-radio>
                <el-radio v-model="form.limitType" label="2">限制</el-radio>
                <span v-show="form.limitType=='2'">
                  <el-input-number v-model="form.maxNum" controls-position="right" :min="1" :max="1000000"></el-input-number>
                  <span class="mar_l10">个码</span>
                </span>
              </div>
            </el-form-item>
            <el-form-item label="兑换权益">
              <div class>
                <div class="mar_lr10">
                  <el-checkbox-group v-model="form.isCoupon">
                    <el-checkbox true-label="1" false-label="2">兑换优惠券</el-checkbox>
                  </el-checkbox-group>
                </div>
                <div v-show="form.isCoupon=='1'" class="flex">
                  <el-select v-model="form.coupon" multiple filterable placeholder="请选择优惠券">
                    <el-option v-for="item in comgrouping" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="flex-g-0 pad_lr_20">
          <div class="fon_16">常见问题</div>
          <el-collapse v-model="collapseName" accordion class="mar_tb10" style="width: 260px">
            <el-collapse-item title="什么是兑换码？" name="1">
              <div>兑换码是门店通过不同的渠道发放给用户，用户通过兑换码来兑换相对应的代金券</div>
            </el-collapse-item>
            <el-collapse-item title="为什么要做兑换码活动？" name="2">
              <div>可以通过兑换码活动来回馈不同的用户群体，增加下单率</div>
            </el-collapse-item>
            <el-collapse-item title="哪些用户可以领取兑换码？" name="3">
              <div>兑换码由门店自行发放，同一兑换码只能发放给同一用户，并且只能兑换一次。</div>
            </el-collapse-item>
          </el-collapse>
          <div class="fon_16 mar_t20">活动规则</div>
          <div class="color_9 mar_t10 lh30 fon_13">
            <div>1.活动仅限在线支付订单；</div>
            <div>2.活动成本由商家承担，与店铺其他活动默认同享</div>
          </div>
        </div>
      </div>
    </div>
    <div class="mar_t20 ba_f pad_20 t_c">
      <el-button type="primary" @click="submitForm">立即创建</el-button>
    </div>
  </div>
</template>
<script>
import { postSaveExchangeCode, getSaveExchangeCode } from '@/api/plug';
import { getSelectCoupon } from '@/api/user';
import { changeDate } from '@/utils/index';

export default {
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.edit();
    }
    this.getSelectCoupon();
  },
  components: {},
  data() {
    return {
      form: {
        name: '',
        stock: '',
        limitType: '1',
        maxNum: '',
        coupon: [],
        isCoupon: '2'
      },
      id: '',
      timeData: [new Date(), new Date().setMonth(new Date().getMonth() + 3)],
      comgrouping: [],
      collapseName: ''
    };
  },
  methods: {
    async getSelectCoupon() {
      const { data } = await getSelectCoupon();
      this.comgrouping = data ? data : [];
    },
    async edit() {
      const { data } = await getSaveExchangeCode({ id: this.id });
      this.form2 = this.form;
      this.form = Object.assign(this.form2, data);
      if (data.startTime) {
        this.timeData = [data.startTime, data.endTime];
      }
    },
    async submitForm() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          if (this.timeData) {
            this.form.startTime = changeDate(this.timeData[0]);
            this.form.endTime = changeDate(this.timeData[1]);
          }
          const { msg } = await postSaveExchangeCode(this.form);
          this.$baseMessage(msg, 'success');
          this.$router.go(-1);
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss">
.exchangeadd {
  .time_item .el-input {
    width: 180px;
  }
}
</style>
